<div layout="column" layout-fill class="settings-child-view">
    <div>

        <div class="help-on-tabbed-view">
            <eb-help-icon template="app/components/parentalControl/blacklists/help-blacklist.template.html"></eb-help-icon>
        </div>

        <div layout-padding layout-margin></div>



        <div>
            <!-- Action bar of table -->
            <div layout="row" layout-xs="column" layout-align="start center">

                <div layout="row" style="width: 100%;">
                    <div flex-xs="50" flex="33" layout="row" layout-align="start center" style="padding-left: 8px;">
                        <!-- WORK MODE -->
                        <div ng-if="!vm.tableEditMode">
                            <md-button ng-click="vm.newBlacklist(event)" class="md-raised md-accent">
                                {{ 'ADMINCONSOLE.BLACKLISTS.ACTION.ADD' | translate }}
                            </md-button>
                        </div>

                        <!-- EDIT MODE -->
                        <div ng-if="vm.tableEditMode">
                            <table-remove-entries table-data="vm.filteredTableData"
                                                  is-entry-deletable="vm.isFilterlistDeletable(value)"
                                                  delete-single-entry="vm.deleteFilterList(value)"
                                                  on-single-delete-done="vm.onSingleDeleteDone()"
                                                  button-label="ADMINCONSOLE.BLACKLISTS.ACTION.REMOVE"
                                                  button-tooltip="ADMINCONSOLE.BLACKLISTS.TOOLTIP.REMOVE_BUTTON"
                                                  dialog-title="ADMINCONSOLE.DIALOG.DELETE_ALL_BLACKLISTS_CONFIRM.TITLE"
                                                  dialog-text="ADMINCONSOLE.DIALOG.DELETE_ALL_BLACKLISTS_CONFIRM.TEXT"
                                                  dialog-text-undeletable="ADMINCONSOLE.DIALOG.DELETE_ALL_BLACKLISTS_CONFIRM.TEXT_UNDELETABLE">
                            </table-remove-entries>
                        </div>

                        <div ng-if="vm.loading" layout="row" layout-align="start center">
                            <md-progress-circular md-mode="indeterminate"></md-progress-circular>
                        </div>
                    </div>

                    <div hide-xs flex="33" layout="row" layout-align="start center" style="width: 100%;">
                        <!-- TABLE SEARCH FOR LARGE DEVICES -->
                        <eb-filter-table filtered-data="vm.filteredTableData"
                                         original-data="vm.tableData"
                                         filter-properties="vm.searchProps">
                        </eb-filter-table>
                    </div>

                    <div flex-xs="50" flex="33" layout="row" layout-align="end center">
                        <!-- CHANGE EDIT MODE OF TABLE (makes entries selectable) -->
                        <eb-edit-table table-data="vm.filteredTableData"
                                       table-edit-mode="vm.tableEditMode">
                        </eb-edit-table>
                    </div>
                </div>

                <div hide-gt-xs style="width: 100%;">
                    <!-- TABLE SEARCH -->
                    <eb-filter-table filtered-data="vm.filteredTableData"
                                     original-data="vm.tableData"
                                     filter-properties="vm.searchProps">
                    </eb-filter-table>
                </div>
            </div>

            <!-- TABLE -->
            <eb-table table-data="vm.filteredTableData"
                      table-header="vm.tableHeaderConfig"
                      table-template="app/components/parentalControl/blacklists/blacklist-table.template.html"
                      table-id="vm.tableId"
                      table-details-state-name="{{vm.detailsState}}"
                      edit-mode="vm.tableEditMode"
                      is-entry-selectable="vm.isSelectable(value)"
                      small-table-header-limit="2">
            </eb-table>

            <div layout="row" layout-align="start center" ng-show="vm.tableEditMode" layout-margin>
                <eb-scroll-paginator table-id="vm.tableId"
                                     table-size="vm.filteredTableData.length">
                </eb-scroll-paginator>
            </div>

        </div>

    </div>
</div>
